/*!
 * HalfStyle
 * Copyright 2014 Arbel Hakopian
 * Licensed under MIT (https://github.com/arbelh/HalfStyle/blob/master/license.md)
 */
 
/* start half-style hs-horizontal-half */
.halfStyle.hs-horizontal-half {
    position:relative;
    display:inline-block;
    font-size:auto; /* or any font size will work */
    color: transparent; /* hide the base character */
    overflow:hidden;
    white-space: pre; /* to preserve the spaces from collapsing */
}
.halfStyle.hs-horizontal-half:before { /* creates the top part */
    display:block;
    z-index:2;
    position:absolute;
    top:0;
    height: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow:hidden;
    pointer-events: none; /* so the base char is selectable by mouse */
    color: black; /* for demo purposes */
    text-shadow: 0px 0px 0px #af0; /* for demo purposes */
}
.halfStyle.hs-horizontal-half:after { /* creates the bottom part */
    display:block;
    position:absolute;
    z-index:1;
    top:0;
    height: 100%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow:hidden;
    pointer-events: none; /* so the base char is selectable by mouse */
    color: red; /* for demo purposes */
    text-shadow: 0px 0px 0px #0af; /* for demo purposes */
}
/* end half-style hs-horizontal-half */